/*less避免编译*/
*{
    margin: 10*10px;
    padding: ~"cacl(100+10px)";
    width: ~"10+1px";
}


/*less继承*/
.father{
    position: relative;
    width: 100px;
    height: 100px;
}
.father:hover{
    background-color: black;
}
.son{
    &:extend(.father all);
    &:nth-child(1){width: 50px;height:50px;}
}



/*arguments变量的作用*/
.border(@1,@2,@3){
    border:@arguments;
}
.abc{
    .border(1px , solid , black)
}

/*less下带参数的混合*/
.commoncss(@w:33px,@h:27px,@b:green){
    /*提取item1,item2中共同的部分*/
    position:absolute;
    left: 0;
    top: 0;
    width: @w;
    height: @h;
    background-color: @b;
}
#content{
    position: relative;
    width: 100px;
    height: 100px;
    .item1{
        .commoncss(@b:yellow);
    }
    item2{
        .commoncss(10px,10px,blue);
        color: #fff;
    }
}


/*less下的普通混合,普通混合会编译到css当中*/
/*不输出混合,需要加上()*/
// .commoncss{
//     /*提取item1,item2中共同的部分*/
//     position:absolute;
//     left: 0;
//     top: 0;
// }
.commoncss(){
    /*提取item1,item2中共同的部分*/
    position:absolute;
    left: 0;
    top: 0;
}
#content{
    position: relative;
    width: 100px;
    height: 100px;
    /*基本的嵌套*/
    .item1{
        /*引入.commoncss样式*/
        // .commoncss;
        .commoncss();
    }
    item2{
        // .commoncss;
        .commoncss();
        color: #fff;
    }
}














/*less下的嵌套规则*/
#wrap{
    position: relative;
    width: 100px;
    height: 100px;
    /*基本的嵌套*/
    .innerBox{
        position:absolute;
        left: 0;
        top: 0;
        /*&表示为同级,&:hover->innerBox:hover*/
        &:hover{
            background-color: black;
        }
    }
}


/*less下的变量是块级作用域的*/
@num:0;
.class{
    @num:1;
    .bclass{
        @num:2;
        three:@num;
        @num:3;
    }
    one:@num;
}




/*作为选择器和属性名：#@{selector的值}的形式*/
@className:header;
@idName:header;

#@{idName}{
    background-color: yellow;
}
.@{className}{
    color: pink;
}



/*作为普通属性值来使用直接`@pink`*/
@color:pink;

.content{
    color: @color;
}

// 这个注释是不会被编译到css文件中的

/*
    这个注释是可以被写入到css文件中的
*/
